<template>
  <div class="container">
    <nav-bar title="TA生活" />
    <div class="fans">
      <img class="person" src='../../assets/img/person.png' />
      <div class="info">
        <div class="name">
          <h3>HAMER</h3>
          <i>已关注</i>
        </div>
        <p>
          <span>关注 3432</span>
          <span>内容 232</span>
          <span>点赞 231987</span>
        </p>
      </div>
      <div class="share">
        <img src='../../assets/img/share.png' />
      </div>
    </div>
    <div class="v-waterfall-content" id="v-waterfall">
      <div v-for="(img, index) in waterfallList"
        :key="index"
        class="v-waterfall-item"
        @click="goToDetail"
        :style="{top:img.top+'px',left:img.left+'px',width:waterfallImgWidth+'px',height:img.height}">
        <img :src="img.src">
        <div class="detail">
          <div class="say">
            瑜伽冥想:放慢生活，感悟时间携手TITIKA主理人JASICA
          </div>
          <div class="user">
            <div class="person">瑜伽冥想</div>
            <div class="good">
              <img src='../../assets/img/good.png' />
              <i>3</i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
export default {
  components: {
    NavBar
  },
  data(){
    return {
      waterfallList:[],
      waterfallImgWidth:100,
      waterfallImgCol:2,
      waterfallImgRight:10,
      waterfallImgBottom:0,
      waterfallDeviationHeight:[],
      imgList:[
        'http://dbshs.oss-cn-shanghai.aliyuncs.com/mini/develop/temp/1581736245398-59.jpeg',
        'http://dbshs.oss-cn-shanghai.aliyuncs.com/mini/develop/temp/1581736245398-59.jpeg',
        'http://dbshs.oss-cn-shanghai.aliyuncs.com/mini/develop/temp/1581736245398-59.jpeg',
        'http://dbshs.oss-cn-shanghai.aliyuncs.com/mini/develop/temp/1581736245398-59.jpeg',
        'http://dbshs.oss-cn-shanghai.aliyuncs.com/mini/develop/temp/1581736245398-59.jpeg',
        'http://dbshs.oss-cn-shanghai.aliyuncs.com/mini/develop/temp/1581736245398-59.jpeg',
        'http://dbshs.oss-cn-shanghai.aliyuncs.com/mini/develop/temp/1581736245398-59.jpeg',
        'http://dbshs.oss-cn-shanghai.aliyuncs.com/mini/develop/temp/1581736245398-59.jpeg',
        'http://dbshs.oss-cn-shanghai.aliyuncs.com/mini/develop/temp/1581736245398-59.jpeg',
      ],
    }
  },
  mounted() {
    this.calculationWidth();
  },
  methods: {
    goToDetail(){
      this.$router.push('/lifeDetail')
    },
    //计算每个图片的宽度或者是列数
    calculationWidth(){
      this.waterfallImgWidth = document.getElementById("v-waterfall").offsetWidth/2 - 10
      let domWidth = document.getElementById("v-waterfall").offsetWidth;
      if (!this.waterfallImgWidth && this.waterfallImgCol){
        this.waterfallImgWidth = (domWidth-this.waterfallImgRight*this.waterfallImgCol)/this.waterfallImgCol;
      }else if(this.waterfallImgWidth && !this.waterfallImgCol){
        this.waterfallImgCol = Math.floor(domWidth/(this.waterfallImgWidth+this.waterfallImgRight))
      }
      //初始化偏移高度数组
      this.waterfallDeviationHeight = new Array(this.waterfallImgCol);
      for (let i = 0;i < this.waterfallDeviationHeight.length;i++){
        this.waterfallDeviationHeight[i] = 0;
      }
      this.imgPreloading()
    },
    //图片预加载
    imgPreloading(){
      for (let i = 0;i < this.imgList.length;i++){
        let aImg = new Image();
        aImg.src = this.imgList[i];
        aImg.onload = aImg.onerror = (e)=>{
          let imgData = {};
          imgData.height = this.waterfallImgWidth/aImg.width*aImg.height + 100;
          imgData.src = this.imgList[i];
          this.waterfallList.push(imgData);
          this.rankImg(imgData);
        }
      }
    },
    //瀑布流布局
    rankImg(imgData){
      let {waterfallImgWidth,waterfallImgRight,waterfallImgBottom,waterfallDeviationHeight,waterfallImgCol} = this;
      //for (let i = 0;i < this.waterfallList.length;i++){
      let minIndex = this.filterMin();
      imgData.top = waterfallDeviationHeight[minIndex];
      imgData.left = minIndex*(waterfallImgRight+waterfallImgWidth);
      waterfallDeviationHeight[minIndex] += imgData.height + waterfallImgBottom;
      //}
      // console.log(imgData);
    },
    /**
     * 找到最短的列并返回下标
     * @returns {number} 下标
     */
    filterMin(){
      const min = Math.min.apply(null, this.waterfallDeviationHeight);
      return this.waterfallDeviationHeight.indexOf(min);
    }
  },
}
</script>

<style scoped>
.fans{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px;
  margin: 12px 10px;
  border-radius: 6px;
  background-color: #fff;
}
.fans img.person{
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
.fans .share img{
  width: 16px;
  margin-top: -10px;
}
.fans .info{
  flex-grow: 1;
  margin: 0 15px;
}
.fans .info .name{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.fans .info .name h3{
  font-size: 16px;
}
.fans .info .name i{
  font-size: 12px;
  color: #666;
}
.fans .info p{
  display: flex;
  justify-content: space-between;
  padding-top: 5px;
}
.fans .info p span{
  font-size: 12px; 
  color: #999999;
}

.v-waterfall-content{
  position: fixed;
  top: 150px;
  left: 10px;
  right: 10px;
  bottom: 0;
  border-radius: 6px;
  overflow: auto;
}
.v-waterfall-item{
  float: left;
  position: absolute;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
  background-color: #ffffff;
}
.v-waterfall-item img{
  width: 100%;
  height: auto;
  border-radius: 5px;
}
.v-waterfall-item .detail{
  padding: 10px;
  font-size: 12px;
}
.v-waterfall-item .detail .user{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0 5px 0;
}
.v-waterfall-item .detail .user img{
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
.v-waterfall-item .detail .user .good{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>